<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>书籍查询</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="${pageContext.request.contextPath }/dist/css/bootstrap.min.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/ie10-viewport-bug-workaround.css" type="text/css"></link>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/justified-nav.css" type="text/css"></link>
    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/ie-emulation-modes-warning.js"></script>
    
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/jquery.pagination.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.pagination.min.js"></script>
    
	<script>
			$(function() {
				var cp=<%= request.getAttribute("currentPage")%>;
				var tp=<%= request.getAttribute("totalPage")%>;
				$("#pagination2").pagination({
					currentPage:cp,
					totalPage:tp,
					isShow: false,
					count: 6,
					prevPageText: "< 上一页",
					nextPageText: "下一页 >",
					callback: function(current) {
						/* 给后台传到了Currentpage */
						$("#CurrentPage").val(current);
						$("#form").submit(); 
					}
				});
			});
	</script>
	
	        <style>
		        * {
		            margin: 0;
		            padding: 0
		        }
		        .box1 {
		            width: 600px;
		            height: 300px;
		            border: 1px solid #ccc;
		            margin: auto;
		            padding: 5px;
		 
		        }
		        .inner{
		            width: 600px;
		            height: 300px;
		            position: relative;
		            overflow: hidden;
		        }
		        .inner img{
		            width: 200px;
		            height: 300px;
		            vertical-align: top
		        }
		        .ul1 {
		            width: 1000%;
		            position: absolute;
		            list-style: none;
		            float: left;
		           
		        }
		        .inner li{
		            float: left;
		 
		        }
		 
		        ol {
		            position: absolute;
		            height: 20px;
		            right: 20px;
		            bottom: 20px;
		            text-align: center;
		            padding: 5px;
		        }
		        ol li{
		            display: inline-block;
		            width: 20px;
		            height: 20px;
		            line-height: 20px;
		            background-color: #fff;
		            margin: 5px;
		            cursor: pointer;
		 
		        }
		        ol .current{
		            background-color: red;
		        }
		        #arr{
		            display: none;
		        }
		        #arr span{
		            width: 40px;
		            height: 40px;
		            position: absolute;
		            left: 5px;
		            top: 50%;
		            margin-top: -20px;
		            background: #fff;
		            cursor: pointer;
		            line-height: 40px;
		            text-align: center;
		            font-weight: bold;
		            font-family: '黑体';
		            font-size: 30px;
		            color: #000;
		            opacity: 0.5;
		            border: 1px solid #fff;
		        }
		        #arr #right {
		            right: 5px;
		            left: auto;
		        }
		        
	       </style>
</head>

<body>
<div class="container">
      <div class="masthead" >
        <h3 class="text-muted">智能图书管理系统</h3>
        <nav>
          <ul class="nav nav-justified">
            <li class="active"><a href="<%=request.getContextPath()%>/looker/showOther">游客模式</a></li>
            <li><a href="<%=request.getContextPath()%>/looker/index">用户及管理员登录入口</a></li>
          </ul>
        </nav>
      </div>

      <!-- Jumbotron -->
     <div class="jumbotron">
         <p><a class="btn btn-lg btn-primary" href="#" role="button">热门推荐</a></p>
        <div class="box1" id="box1">
		    <div class="inner">
		    
		        <!--轮播图-->
		        <ul class="ul1">
		          <c:forEach items="${list}" var="bookRating">
		           <li><a href="<%=request.getContextPath()%>/looker/borrow?id=${bookRating.bookid}"><img src="bookimg/${bookRating.bookid}.jpg" alt=""></a></li>
		          </c:forEach>
		        </ul>
		        <ol class="bar">
		             
		        </ol>
		        <!--左右焦点-->
		        <div id="arr">
		              <span id="left"> <</span>
		              <span id="right">></span>
		        </div>
		 
		    </div>
		</div>
       
      </div>

      <div class="container">
      <form id="form" class="form-inline definewidth m20"
		action="<%=request.getContextPath()%>/looker/showOther" method="post" align="center">
		书籍名称： <input  type="text" name="bname" id="username"
			class="abc input-default" style="width:200px;height:40px" placeholder="书籍关键字" 
			<c:if test="${bname!=null and bname!='' }">value="${bname }"</c:if> />&nbsp;&nbsp;
		书籍类别:<select class="form-control" name="sid" style="width:200px;height:40px">
					<option value="0" selected="selected">--请选择书籍类别--</option>
					
					<c:forEach items="${sorts }" var="sort">
						<option value="${sort.id }" <c:if test="${sid==sort.id }">selected</c:if>>${sort.sname }</option>
					</c:forEach>
					
				</select>&nbsp;&nbsp;
		<button type="submit" class="btn btn-primary" style="width:100px;height:40px">查询</button>
		
		<input id="CurrentPage" type="hidden" name="currentPage" value="1" />
		
	</form>	<br>
	
          <table class="table table-bordered table-hover definewidth m10" >
			<thead>
				<tr>
					<th>书籍名称</th>
					<th>书籍类别</th>
					<th>作者</th>
					<th>出版社</th>
					<th>版本</th>
					<th>操作</th>
				</tr>
			</thead>
			<c:forEach items="${page.list }" var="book">
				<tr >
					<td>${book.bname}</td>
					<td>${book.sname}</td>
					<td>${book.author}</td>
					<td>${book.birth}</td>
					<td>${book.edition}</td>
					<td>
						<a type="button" class="btn btn-success" href="<%=request.getContextPath()%>/looker/borrow?id=${book.id}">查看</a>
					</td>
				</tr>
			</c:forEach>
		</table>
		
		<center>
			<div class="box">
				<div id="pagination2" class="page fl"></div>
			</div>
		</center>
		
      <!-- Site footer -->
      <footer class="footer" align="center">
       <a href="http://beian.miit.gov.cn/">鄂ICP备2021006740号-1</a>
       <div style="width:300px;margin:0 auto; padding:20px 0;">
		 		<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42092102000053" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
		 		<img src="../images/备案图标.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备 42092102000053号</p></a>
		 	</div>
       <p>YanJiaDou &copy; 2020 版权所有</p>
       
      </footer>

    </div> 
</div>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

<script>
    /**
     *
     * @param id  传入元素的id
     * @returns {HTMLElement | null}  返回标签对象，方便获取元素
     */
    function my$(id) {
        return document.getElementById(id);
    }
 
    //获取各元素，方便操作
    var box=my$("box1");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    
    //根据li个数，创建小按钮
    for(var i=0;i<list.length/3;i++){
        var liObj=document.createElement("li");
 
        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);
 
        //为按钮注册mouseover事件
        liObj.onmouseover=function () {
            //先清除所有按钮的样式
 
            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            animate(ulObj,-pic*imgWidth);
        }
 
    }
 
 
    //设置ol中第一个li有背景颜色
    olObj.children[0].className = "current";
    //克隆一个ul中第一个li,加入到ul中的最后=====克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));
 
    var timeId=setInterval(onmouseclickHandle,3000);
    
    //左右焦点实现点击切换图片功能
    box.onmouseover=function () {
        arr.style.display="block";
        clearInterval(timeId);
       
    };
    
    box.onmouseout=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,3000);
    };
 
    right.onclick=onmouseclickHandle;
    
    function onmouseclickHandle() {
        //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
        //所以,如果用户再次点击按钮,用户应该看到第二个图片
        if (pic == 3) {
            //如何从第6个图,跳转到第一个图
            pic = -1;//先设置pic=0
            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
        }
        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
        //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
        if (pic == list.length - 1) {
            //第五个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else {
            //干掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    
    left.onclick=function () {
        if (pic==0){
            pic=4;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    };
    
    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            //获取元素的当前的位置,数字类型
            var current = element.offsetLeft;
            //每次移动的距离
            var step = 10;
            step = current < target ? step : -step;
            //当前移动到位置
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left = target + "px";
            }
        }, 10);
    }
</script>

</html>